const { whenProd, pluginByName, getPlugin } = require('@craco/craco');
const path = require('path');

module.exports = {
	webpack: {
		alias: {
			'@': path.resolve(__dirname, 'src'),
		},
		configure: (webpackConfig) => {
			let cdn = { js: [] }; // Initialize cdn with an empty js array

			whenProd(() => {
				// Production environment configuration
				webpackConfig.externals = {
					react: 'React',
					'react-dom': 'ReactDOM',
				};
				cdn = {
					js: [
						'https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js',
						'https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js',
					],
				};
			});

			// Inject CDN into HtmlWebpackPlugin
			const { isFound, match } = getPlugin(webpackConfig, pluginByName('HtmlWebpackPlugin'));
			if (isFound) {
				match.options.cdn = cdn; // Assign the cdn object
			}
			
			return webpackConfig;

			
		}

	},
};
